<template>
  <!-- <NButton>click me</NButton> -->
  <NGrid x-gap="10" cols="3" style="width: 100%">
    <NGridItem>
      <NCard hoverable>
        <h3>全局信息</h3>
        <NForm style="width: 100%" :model="zoneConfig" :rules="rules">
          <NFormItem label="origin" path="origin">
            <NInput v-model:value="zoneConfig.origin" maxlength="64" show-count></NInput>
          </NFormItem>
          <NFormItem label="ttl" path="ttl">
            <DurationInput
              v-model:value="zoneConfig.ttl.value"
              v-model:unit="zoneConfig.ttl.unit"
            ></DurationInput>
          </NFormItem>
        </NForm>
        <h3>SOA 信息</h3>
        <NForm title="SOA" style="width: 100%">
          <NFormItem label="origin">
            <NInput v-model:value="form.origin"></NInput>
          </NFormItem>

          <NFormItem label="ttl">
            <DurationInput
              v-model:value="form.ttl.value"
              v-model:unit="form.ttl.unit"
            ></DurationInput>
          </NFormItem>

          <NFormItem label="dns">
            <NInput v-model:value="form.dns"></NInput>
          </NFormItem>

          <NFormItem label="email">
            <NInput v-model:value="form.email"></NInput>
          </NFormItem>

          <NFormItem label="serial">
            <NInputNumber v-model:value="form.serial"></NInputNumber>
          </NFormItem>

          <NFormItem label="refresh">
            <DurationInput
              v-model:value="form.refresh.value"
              v-model:unit="form.refresh.unit"
            ></DurationInput>
          </NFormItem>

          <NFormItem label="retry">
            <DurationInput
              v-model:value="form.retry.value"
              v-model:unit="form.retry.unit"
            ></DurationInput>
          </NFormItem>

          <NFormItem label="expire">
            <DurationInput
              v-model:value="form.expire.value"
              v-model:unit="form.expire.unit"
            ></DurationInput>
          </NFormItem>

          <NFormItem label="min ttl">
            <DurationInput
              v-model:value="form.minTtl.value"
              v-model:unit="form.minTtl.unit"
            ></DurationInput>
          </NFormItem>
          <NButton @click="create" type="primary">创建</NButton>
        </NForm>
      </NCard>
    </NGridItem>
    <NGridItem>
      <NCard hoverable>
        <pre>{{ JSON.stringify(form, undefined, 2) }}</pre>
      </NCard>
    </NGridItem>
    <NGridItem>
      <NCard hoverable>
        <!-- <pre>{{ toZonefile() }}</pre> -->
      </NCard>
    </NGridItem>
  </NGrid>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import {
FormItemRule,
  FormRules,
  NButton,
  NCard,
  NForm,
  NFormItem,
  NGrid,
  NGridItem,
  NInput,
  NInputNumber
} from 'naive-ui'
import { useDomain } from '@/stores/domain'
import dayjs from 'dayjs'

const router = useRouter()
// NInput
// NButton
const zoneConfig = ref<ZoneConfig>({
  origin: 'example.',
  ttl: {
    value: 3600,
    unit: ''
  }
})
const dayStr = dayjs().format('YYYYMMDD')
const form = ref<SoaRecord>({
  origin: '@',
  ttl: { value: 3600, unit: '' },
  clazz: 'IN',
  type: 'SOA',
  dns: 'dns.example.',
  email: 'admin.dns.example.',
  serial: Number(dayStr) * 100 + 1,
  refresh: { value: 7200, unit: '' },
  retry: { value: 3600, unit: '' },
  expire: { value: 1209600, unit: '' },
  minTtl: { value: 3600, unit: '' }
})

function durationValidator(rule:FormItemRule,val:DnsDuration){
  return new Promise<void>((resolve, reject) => {
        // console.log("validating",rule,)
        if (val.value > 0) {
          resolve()
        }
        reject(Error('something wrong'))
      })
}

let rules: FormRules = {
  origin: {
    required: true,
    trigger: 'blur',
    validator: (rule, value: string) => {
      return new Promise<void>((resolve, reject) => {
        if (!value) {
          reject(Error('can not be null!'))
        }
        if (!value.endsWith('.')) {
          reject(Error('must ends with "."'))
        }
        if (!/^([a-zA-Z0-9-]+\.)+$/.test(value)) {
          reject(Error('milformed origin'))
        }
        resolve()
      })
    }
  },
  ttl: {
    trigger: 'blur',
    required: true,
    validator: durationValidator
  }
}

async function create() {
  const { data: resDataSuccess } = await useFetch('/api/domain', {
    method: 'post',
    body: {
      zoneConfig,
      soaRecord: form.value
    }
  })
  useDomain().getDomains()
  router.push(`/domain/${zoneConfig.value.origin}`)
}
</script>
<script lang="ts">
export default {
  name: 'IndexPage'
}
</script>
